<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    var names = ['abc', 'cba', undefined, 'nba', 'mba']
    var obj = { name: "why", age: 18, height: 1.88 }

    // 1. 数组的解构
    // 1.1 基本使用
    var [name1, name2, name3, name4] = names
    console.log(name1, name2, name3, name4)
    // 1.2 顺序问题:严格的顺序
    var [name1, , name3] = names
    console.log(name1, name3)
    // 1.3 解构出数组
    var [name1, name2, ...newNames] = names
    console.log(name1, name2, newNames)
    // 1.4 解构的默认值
    var [name1 = 'default', name2 = 'default', name3 = 'default'] = names
    console.log(name1, name2, name3)


    // 2. 对象的解构
    // 2.1 基本使用
    var { name, age, height } = obj
    console.log(name, age, height)
    // 2.2 顺序问题:对象的解构是没有顺序的,根据key解构
    var { height, name, age } = obj
    console.log(name, age, height)
    // 2.3 对变量进行重命名
    var { height: h, name: n, age: a } = obj
    console.log(n, a, h)
    // 2.4 默认值
    console.log(name, age, height, address)
    var { height, name, age, address = '广州' } = obj
    console.log(name, age, height, address)
    // 2.5 对象的剩余
    var { name, age, ...newObj } = obj
    console.log(name, age, newObj)


    // 应用
    // function getPosition(position) {
    //   console.log(position.x, position.y)
    // }
    function getPosition({ x, y }) {
      console.log(x, y)
    }

    getPosition({ x: 10, y: 20 })


  </script>
</body>

</html>